In this tutorial we demonstrate how to style the search box in DotNetNuke skins. We walk you through how we applied the styling to the search box in the free ‘internet sharing’ skin.
This covers how we expanded the width of the search box, how to use a graphic for the search box, how to style the text that the search box uses, how to style the search link as a button and how to replace the search link with an image.We recommend that you view CSS skinning tutorials and get to grips with skinning before following this tutorial.Video 1Introduction to styling the search box in the ‘internet sharing’ skinViewing the skin with all styling removed from the search boxOpening the skin files as a website in VWD expressSkin.xmlThe search tokenHow to specify the display settings for the Site and Web radio search optionsHow to remove the Site and Web radio search buttonsHow to view the ids and classes associated with the search box and search linkUsing the web developers toolbar to edit the CSS file liveHow to style the search boxHow to specify a width for the search boxHow to style the search box textCopying the CSS to the skin.css fileHow to use an image for the search text boxHow to add padding to the search text boxHow to remove the borders from the DotNetNuke search boxTime Length: 9min 59secsVideo 2Problems caused by styling the search text boxHow to style the search linkLooking at the options of using the id or classHow to style the search link button in a standard DotNetNuke skinStyling using a CSS classStyling using the search IDHow to use CSS to style the search link to appear as a buttonHow to override background images styling the search buttonHow to style the search button when the mouse hovers over the buttonHow to style the search link with an imageHow to specify in the search token settings to use an imageHow to style the search imageHow to position the search imageHow to remove the link borders around the imageTime Length: 13min 34secsTotal Time Length: 23min 33secsFor details on the web developers toolbar, view this tutorial: Troubleshooting DotNetNuke Skins
首页 >
How to skin and style the search box in DotNetNuke > How to skin and style the search box in DotNetNuke